<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount, Ref,
} from "vue";
import {useRoute, useRouter} from "vue-router";
import QrCode from "@/components/QrCode.vue";
import {apiGetWxLoginQrCode, apiGetWxLoginQrCodeStatus} from "@/api/login";

const route = useRoute();
const router = useRouter();
const data = reactive({
  // 数据源的存放地
});
const wxLoginQrCodeStatusQuery = ref({
  ticket: null
});
const showQrCode = ref(false);
const ticket = ref();
const code = ref();
const userScanMask = ref();
const userAvatarUrl = ref("https://thirdwx.qlogo.cn/mmopen/vi_32/JW7VPm1bODgTPB07Mv7oq5NxqSKGsa8qEVuycfrlztYAeC7LSwVPiaiaf2nyyx319PiaNCFtW5cMxUvVr2ZYC6g09sqzEBGKyCoWvFhn0muS9w/132");
const username = ref();

const wxLoginQrCodeUrl = ref<String>()
const size = ref(256)
const color = ref('#000000')

let timer: Ref<any> = ref();

const getWxLoginQrCode = () => {
  apiGetWxLoginQrCode().then(res => {
    if (res.code === 200) {
      // console.log(res)
      wxLoginQrCodeUrl.value = res.data.qrCodeUrl
      wxLoginQrCodeStatusQuery.ticket = res.data.ticket
      ticket.value = res.data.ticket
      code.value = res.data.code
      // console.log(wxLoginQrCodeStatusQuery)
      const qrCodeStatusParams = {
        ticket: res.data.ticket
      }
      showQrCode.value = true
      //每5s刷新数据
      timer = setInterval(() => {
        apiGetWxLoginQrCodeStatus(qrCodeStatusParams).then(res => {
          if (res.code === 200) {
            // console.log(res)
            if (res.data.state === "1") {
              // 扫码事件
              console.log(res.data.state)
              userScanMask.value = true
              userAvatarUrl.value = res.data.avatarUrl
              username.value = res.data.nickName
            } else if (res.data.state === "2") {
              console.log("登陆成功" + res.data.token)
              username.value="已登陆"
              clearInterval(timer)
              timer = null;
            }
          }else {
            username.value = res.msg
            clearInterval(timer)
            timer = null;
          }
        })
      }, 2000);
    }
  })
}
onMounted(() => {
  // 获取微信登录二维码
  getWxLoginQrCode()
})
onBeforeUnmount(() => {
  clearInterval(timer)
  timer = null;
})
</script>

<template>
  <div class="wrap-box">
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo"/>
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="../assets/vue.svg" class="logo vue" alt="Vue logo"/>
      </a>
    </div>
    <div>
      <div class="qrcode-container">
        <QrCode v-if="showQrCode" :value="wxLoginQrCodeUrl" :size="size" :foreground="color"/>
        <div class="user-scan-mask" v-if="userScanMask">
          <div style="width: 200px;height: 200px;display: flex;justify-content: center;align-items: center"><img
              width="64px" height="64px" style="border-radius: 1rem" :src="userAvatarUrl"></div>
          <div>已扫码，待授权</div>
          <div>{{ username }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrap-box {
  max-width: 100vw;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.qrcode-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-scan-mask {
  position: absolute;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

